<template>
  <div>
    <myBreadcrumb></myBreadcrumb>
    <el-form :inline="true" class="demo-form-inline" style="text-align: left">
      <el-form-item label="学生姓名：">
        <el-input v-model="pName" placeholder="请输入学生姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getstudents">查询</el-button>
        <el-button type="warning" @click="handlebatchdelete"
          >批量删除</el-button
        >
        <el-button type="success" @click="handleadd">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%; text-align: center"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40"> </el-table-column>
      <el-table-column prop="Id" label="编号"> </el-table-column>
      <el-table-column prop="Name" label="姓名"> </el-table-column>
      <el-table-column prop="Age" label="年龄"> </el-table-column>

      <el-table-column prop="Sex" label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.Sex">男</span>
          <span v-else>女</span>
        </template>
      </el-table-column>

      <el-table-column prop="Nation" label="民族"> </el-table-column>
      <el-table-column prop="Hobbys" label="爱好"> </el-table-column>
      <el-table-column prop="IsInSchool" label="是否在校">
        <template slot-scope="scope">
          <span v-if="scope.row.IsInSchool">在校</span>
          <span v-else>离校</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="CreateTime"
        :formatter="dateFormat"
        label="添加时间"
        width="160px"
      >
      </el-table-column>

      <el-table-column label="操作" width="245">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="info" size="small"
            >编辑</el-button
          >
          <el-button
            type="warning"
            size="small"
            @click="handledelete(scope.row.Id)"
            >删除</el-button
          >

          <el-button
            v-if="scope.row.IsInSchool"
            type="info"
            size="small"
            @click="handleisinschool(scope.row.Id)"
            >离校</el-button
          >
          <el-button
            v-else
            type="success"
            size="small"
            @click="handleisinschool(scope.row.Id)"
            >在校</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>

import myBreadcrumb from '@/views/Breadcrumb.vue'

export default {
  data() {
    return {
      multipleSelection: [],
      pName: "",
      pageIndex: 1,
      pageSize: 5,
      totalCount: 1,
      tableData: [
        {
          Id: "1",
          Name:   localStorage.getItem("1111"),
          Age: 12,
          Sex: true,
          Nation: "汉族",
          Hobbys: "书法",
          IsInSchool: true,
          CreateTime: new Date(),
        },
      ],
    };
  },
  components:{
    myBreadcrumb
  },
  mounted() {
    var tmpApiUrl = this.$apiUrl;
    console.log(tmpApiUrl)
    this.getstudents(1, this.pageSize);
  },
  methods: {
    getstudents(tmpPageIndex, tmpPageSize) {
      this.$axios({
        url: "http://localhost:53464/api/values",
        method: "get",
        params: {
          name: this.pName,
          pageIndex: tmpPageIndex,
          pageSize: tmpPageSize,
        },
      }).then((res) => {
        this.pageSize = tmpPageSize;
        this.totalCount = res.data.TotalCount;
        this.tableData = res.data.Items;
      });
    },
    //编辑
    handleClick(row) {
      this.$router.push({
        path: "/Update",
        name: "Update",
        params: {
          id: row.Id,
        },
      });
    },
    dateFormat(row, column) {
      var date = row[column.property];
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
    handleSizeChange(val) {
      this.getstudents(1, val);
    },
    handleCurrentChange(val) {
      this.getstudents(val, this.pageSize);
    },
    //设置在校状态
    handleisinschool(tmpid) {
      this.$axios({
        url: "http://localhost:53464/api/values/IsInSchool",
        method: "get",
        params: {
          id: tmpid,
        },
      }).then((res) => {
        if (res.data <= 0) {
          alert("设置状态失败！");
          return;
        }
        this.getstudents(1, this.pageSize);
      });
    },
    //单删
    handledelete(tmpid) {
      if (confirm("确定删除吗？")) {
        this.$axios({
          url: "http://localhost:53464/api/values",
          method: "delete",
          params: {
            id: tmpid,
          },
        }).then((res) => {
          if (res.data <= 0) {
            alert("删除失败！！");
            return;
          }
          this.getstudents(1, this.pageSize);
        });
      }
    },
    //批删
    handlebatchdelete() {
      var ids = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].Id);
      }
      if (ids.toString() == "") {
        alert("请选中数据再操作！！");
        return;
      }

      if (confirm("确定批量删除吗？")) {
        this.$axios({
          url: "http://localhost:53464/api/values/BatchDelete",
          method: "delete",
          params: {
            ids: ids.toString(),
          },
        }).then((res) => {
          if (res.data <= 0) {
            alert("批量删除失败！！");
            return;
          }
          this.getstudents(1, this.pageSize);
        });
      }
    },
    //全选、反选事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //添加
    handleadd() {
      this.$router.push("/Add");
    },
  },
};
</script>

<style>
</style>